<template>
  <a-space class="flex-wrap" size="middle">
    <div
      v-for="(item, index) in props.searchList"
      :key="index"
      class="flex items-center whitespace-nowrap"
    >
      <div class="pr-8px">{{ item.title + '：' }}</div>
      <a-input
        v-if="item?.component === ComponentsTypeEnum.Input"
        v-model:value="queryParams[item.alias ?? item.dataIndex]"
        class="w-200px"
        v-bind="item?.componentProps"
        :placeholder="`请输入${item.title}`"
        :allow-clear="true"
        :disabled="item?.disable"
      />
      <a-select
        v-if="item.component === ComponentsTypeEnum.Select"
        v-model:value="queryParams[item.alias ?? item.dataIndex]"
        class="min-w-150px"
        v-bind="item?.componentProps"
        :placeholder="`请选择${item.title}`"
        allow-clear
        @change="
          (value) => {
            queryParams[item.alias ?? item.dataIndex] = value;
          }
        "
      >
      </a-select>
    </div>
    <slot name="searchQuery"></slot>
    <template v-if="props.searchList.length">
      <a-button @click="emit('resetFields')"> 重置 </a-button>
      <a-button type="primary" @click="onSearch"> 查询 </a-button>
    </template>
    <slot name="searchBtn"></slot>
  </a-space>
</template>

<script setup>
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';

  const props = defineProps({
    searchRowGutter: {
      type: [Array, Number],
      default: () => {
        return [16, 16];
      },
    },
    searchParams: {
      type: [Object],
      default: () => {
        return {};
      },
    },
    searchList: {
      type: [Array],
      default: () => {
        return [];
      },
    },
  });

  const emit = defineEmits(['resetFields', 'searchFun']);

  const { searchParams } = toRefs(props);
  const queryParams = ref();
  watchEffect(() => {
    queryParams.value = searchParams.value;
  });
  const onSearch = () => {
    emit('searchFun', queryParams.value);
  };
</script>

<style scoped lang="less">
  @import '@/styles/animation.less';
  :deep(.ant-btn) {
    .throttle_animation();
  }
</style>
